<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      class="backgroundImage"
      ref="paging"
      :auto="automatic"
      @scroll="scroll"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="p-4 flex flex-col gap-[2.25rem]">
        <view class="flex flex-col gap-3">
          <image src="/static/dddr2.png" class="h-[3.4375rem]" mode="heightFix" />
          <view class="text-[.75rem] text-[#919499]">
            未注册的手机号在接受协议并填入我们发送的验证码后将自动创建钓点达人账号
          </view>
        </view>
        <view class="w-full h-[3rem] bg-[#FFFFFF] rounded-[.5rem] flex items-center">
          <view class="w-[3.75rem] text-center">+86</view>
          <input
            type="tel"
            class="flex-1 h-full"
            focus
            placeholder="请输入手机号码"
            maxlength="11"
            v-model="mobile"
            :adjust-position="false"
          />
          <view class="flex items-center px-4">
            <image src="/static/dddr42.png" v-if="mobile" class="size-4" mode="aspectFill" @click="mobile = ''" />
          </view>
        </view>

        <view
          class="w-full h-[2.75rem] flex justify-center items-center rounded-full btn"
          :style="{ backgroundColor: isValidMobile ? '#00A9AB' : '#99DBDC' }"
          @click="sendSms"
        >
          <view class="text-[1rem] text-[#E5F6F6] font-medium">获取验证码</view>
        </view>
        <view class="flex justify-center items-center" :class="shake ? 'animate-shake' : ''">
          <!-- <view
            class="size-[.75rem] rounded-sm flex items-center justify-center"
            :style="{ backgroundColor: isAgree ? '#00A9AB' : 'transparent' }"
            :class="isAgree ? '' : 'border border-[#919499]'"
            @click="isAgree = !isAgree"
          >
            <text v-if="isAgree" class="text-white text-[.625rem]">✓</text>
          </view> -->

          <view class="flex items-center px-2 leading-none" @click="isAgree = !isAgree">
            <image src="/static/dddr120.png" mode="aspectFill" class="size-3" v-if="!isAgree" />
            <image src="/static/dddr121.png" mode="aspectFill" class="size-3" v-if="isAgree" />
          </view>

          <view class="text-[.75rem] text-[#919499] font-medium flex items-center" @animationend="shake = false">
            我已阅读并同意
            <view class="text-[#00A9AB]" @click="vk.navigateTo('/pages/login/agreement?type=1')"> 《用户协议》 </view>
            及
            <view class="text-[#00A9AB]" @click="vk.navigateTo('/pages/login/agreement?type=2')"> 《隐私政策》 </view>
          </view>
        </view>
        <template v-if="vk.myfn.isIOS() || vk.myfn.checkWechatInstalled()">
          <view class="flex gap-2 justify-center items-center">
            <view class="w-[5.4375rem] border-solid border-[#DDDFE4] border-t-[.0625rem]"> </view>
            <view class="text-[.8125rem] text-[#C0C4CC]"> 其他登录方式 </view>
            <view class="w-[5.4375rem] border-solid border-[#DDDFE4] border-t-[.0625rem]"> </view>
          </view>
          <view class="flex gap-6 justify-center items-center">
            <view class="size-[4rem]" @click="appleLogin" v-if="vk.myfn.isIOS()">
              <image src="/static/dddr13.png" mode="aspectFill" class="size-full" />
            </view>
            <view class="size-[4rem]" @click="wechatLogin" v-if="vk.myfn.checkWechatInstalled()">
              <image src="/static/dddr15.png" mode="aspectFill" class="size-full" />
            </view>
          </view>
        </template>
      </view>
    </yy-paging>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 添加滚动事件
        dataList: [], //  添加数据列表
        automatic: false, //  添加自动加载
        mobile: '', // 添加手机号码
        isAgree: false, // 添加协议同意状态
        shake: false
      }
    },
    onLoad() {
      // #ifdef H5
      this.mobile = 18599932826
      // #endif
    },

    methods: {
      wechatLogin() {
        if (!this.isAgree) {
          vk.myfn.vibrate()
          this.shake = true
          setTimeout(() => {
            this.shake = false
          }, 400)
          return vk.toast('请同意协议')
        }
        vk.myfn.wxLogin()
      },
      appleLogin() {
        if (!this.isAgree) {
          vk.myfn.vibrate()
          this.shake = true
          setTimeout(() => {
            this.shake = false
          }, 400)
          return vk.toast('请同意协议')
        }
        vk.myfn.appleLogin()
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },
      async sendSms() {
        if (!this.mobile) return vk.toast('请输入手机号码')
        if (!vk.myfn.validatePhone(this.mobile)) return vk.toast('请输入正确的手机号码')
        if (!this.isAgree) {
          vk.myfn.vibrate()
          this.shake = true
          setTimeout(() => {
            this.shake = false
          }, 400)
          return vk.toast('请同意协议')
        }
        vk.showLoading('发送中...')
        let res = await api.sendSms({
          mobile: this.mobile,
          template_code: 'user_login'
        })
        vk.hideLoading()
        if (!res.code) return vk.toast(res.msg)
        // if (!res.code) return vk.toast(res.msg, 'none')
        vk.navigateTo('/pages/login/verificationCode?mobile=' + this.mobile)
      }
    },
    computed: {
      isValidMobile() {
        return this.mobile.length === 11
      }
    }
  }
</script>

<style lang="scss" scoped>
  @keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-0.25rem);
    }
    75% {
      transform: translateX(0.25rem);
    }
  }
  .backgroundImage,
  page {
    background-image: url('https://basan.oss-cn-chengdu.aliyuncs.com/storage/products/20250807/1754537398599_tkpSa8tw.jpg') !important;

    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
    // background-color: #f4f6f8 !important;
  }

  .animate-shake {
    animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }
</style>
